<template>
  <el-row>
    <el-col>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色标识符">
          <el-input placeholder="请输入角色标识符"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select  placeholder="状态筛选">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-button type="success" :icon="Plus" @click="addDialog = true">新增</el-button>
    <el-button type="danger" :icon="Delete">批量删除</el-button>
  </el-row>
  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-table :data="getData"
                style="width: 100%"
                row-class-name="background:#f8f8f9;color:#535a6c"
                header-cell-style="background:#f8f8f9;color:#535a6c">
        <el-table-column prop="id" label="角色编号"></el-table-column>
        <el-table-column prop="roleKey" label="角色标识符"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="description" label="角色描述"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <StatusTag :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default>
            <el-button-group>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此角色"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此角色"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此角色"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-dialog v-model="addDialog" title="添加角色" width="400px" center>
    <AddRole></AddRole>
  </el-dialog>
</template>

<script>
import {getAllRole} from "@/api/role";
export default {
  name: "RolePage",
  data() {
    return {
      data: '',
      addDialog:false
    }
  },
  mounted() {
    this.getRole();
  },
  methods: {
    async getRole() {
      //8080/dept/dept-getAll
      const t = await getAllRole();
      this.data = t.data.data;
    },
  },
  computed:{
    getData() {
      return this.data;
    }
  }
}
</script>
<script setup>
import {Plus,Search,Refresh,Remove,Edit,Delete} from "@element-plus/icons-vue";
import StatusTag from "@/components/table/StatusTag";
import AddRole from "@/view/role/AddRole";
</script>
<style scoped>

</style>